<template>
    <el-dialog v-model="printDeliveryLabelVisible" :show-close="false" @open="initAllDataEvnet" destroy-on-close>
        <!-- 标题 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">
                    仓库标签
                    <el-text tag="b" type="primary">请使用10*10cm的标签纸</el-text>
                    --- ESC关闭
                </h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    关闭
                </el-button>
            </div>
        </template>
        <!-- 打印内容 -->
        <div v-if="printDeliveryLabelData" class="print-content">
            <el-scrollbar height="400px">
                <!-- 打印单内容 -->
                <div id="print-delivery-label-container">
                    <!-- 生成表单 -->
                    <table v-for="(item, index) in props.printDeliveryLabelData.orderData" :key="index" class="print-delivery-label-table">
                        <thead>
                            <tr>
                                <th colspan="12" class="print-delivery-label-header">{{ useSystem.print.OWNprint.companyName }}产品标识卡</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th colspan="2">客户</th>
                                <td colspan="4">{{ getCustomerInfo(printDeliveryLabelData.customerId).customerAbbreviation }}</td>
                                <th colspan="2">产品名称</th>
                                <td colspan="4">{{ item.productName }}</td>
                            </tr>
                            <tr>
                                <th colspan="2">产品尺寸</th>
                                <td colspan="4">{{ item.productSize || '/' }}</td>
                                <th colspan="2">物料号</th>
                                <td colspan="4">{{ item.materialNumber || '/' }}</td>
                            </tr>
                            <tr>
                                <th colspan="2">订单号</th>
                                <td colspan="10">{{ item.orderNo }}</td>
                            </tr>
                            <tr>
                                <th colspan="2">订单数量</th>
                                <td colspan="4">{{ item.orderNumber }}</td>
                                <th colspan="2">送货数量</th>
                                <td colspan="4">{{ item.deliveryQuantity }}</td>
                            </tr>
                            <tr>
                                <th colspan="2">备注</th>
                                <td colspan="10">
                                    <el-input v-model="item.remark" :rows="2" type="textarea" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </el-scrollbar>
            <!-- 打印按钮 -->
            <el-button class="mt-2" plain @click="print">打印</el-button>
        </div>
        <!-- 没有打印内容 -->
        <div v-if="!printDeliveryLabelData" class="w-full flex items-center justify-center">
            <el-empty description="没有可有打印的标签。" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { getCustomerList } from '@/api/customer';
import { useSystemStore } from '@/store/modules/system';
import { checkPermi } from '@/utils/permission';
import { CircleCloseFilled } from '@element-plus/icons-vue';
import './printDeliveryLabel.css';
import printJS from 'print-js';

/* ******************************暴露给父组件的属性/方法****************************** */
// 打印送货标签的dialog开关
const printDeliveryLabelVisible = defineModel('printDeliveryLabelVisible', { type: Boolean, required: true });
// 需要打印的送货数据
const props = defineProps<{
    printDeliveryLabelData: AjaxResponse['outBoundList'][0];
}>();

/* ******************************通用属性/方法****************************** */
// 路由
const router = useRouter();
// 系统配置
const useSystem = useSystemStore();

// 客户列表
const customerList = reactive<AjaxResponse['customerList']>([]);
// 获取客户列表事件
const getCustomerListEvnet = async () => {
    customerList.length = 0;
    // 匹配最新的客户数据
    const customerData = await getCustomerList(true);
    if (customerData.data.length > 0) {
        customerData.data.forEach((item) => {
            customerList.push(item);
        });
    }
};
// 匹配客户信息
const getCustomerInfo = (customerId: string) => {
    const customer = customerList.find((item) => item._id == customerId);
    if (customer) {
        return customer;
    } else {
        return {
            customerAbbreviation: '',
            customerName: '',
            customerTaxpayerIdentificationNumber: '',
            customerContact: '',
            customerPhone: '',
            customerAddress: '',
        };
    }
};

/* ******************************dialog open的方法****************************** */
// 当dialog打开时初始化数据
const initAllDataEvnet = async () => {
    // 没有过检，则提示前往设置
    if (useSystem.checkPrintSetting().type == 'warning') {
        // 弹窗提示
        ElMessageBox.confirm(useSystem.checkPrintSetting().message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '取消',
            showClose: false,
            type: 'warning',
        })
            .then(() => {
                // 权限验证
                if (!checkPermi(['system:config'])) {
                    // 提示
                    ElMessage.error('没有权限');
                    return;
                }
                router.push({ name: 'SystemConfig' });
            })
            .catch(() => {
                printDeliveryLabelVisible.value = false;
            });
    } else {
        // 获取客户列表
        await getCustomerListEvnet();
    }
};

/* ******************************打印的方法****************************** */
// 打印事件
const print = () => {
    printJS({
        printable: 'print-delivery-label-container',
        type: 'html',
        scanStyles: false,
        css: import.meta.env.VITE_APP_PRINT_DELIVERY_LABEL,
    });
};
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}
</style>
